<!--
 * @Descripttion: 供应频道的主要商品和选择
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-10 15:13:15
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-13 19:18:45
-->
<template>
  <el-container class="goods" id="goods" name="goods">
    <!-- 面包屑和分类 -->
    <el-header class="elheader">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>供应频道</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="classification">
        <el-container class="product-nav">
          <div class="title">分类：</div>
          <el-tabs v-model="activeName1" @tab-click="handleClick1">
            <el-tab-pane label="高端农产品" name="first"></el-tab-pane>
            <el-tab-pane label="时令鲜果" name="second"></el-tab-pane>
            <el-tab-pane label="加工品" name="third"></el-tab-pane>
            <el-tab-pane label="生鲜海产品" name="fourth"></el-tab-pane>
          </el-tabs>
        </el-container>
        <el-container class="product-find">
          <div class="title">您是不是在找：</div>
          <el-tabs v-model="activeName2" @tab-click="handleClick2">
            <el-tab-pane label="产品1" name="first"></el-tab-pane>
            <el-tab-pane label="产品2" name="second"></el-tab-pane>
            <el-tab-pane label="产品3" name="third"></el-tab-pane>
            <el-tab-pane label="产品4" name="fourth"></el-tab-pane>
          </el-tabs>
        </el-container>
      </div>
    </el-header>
    <!-- 面包屑和分类 END-->

    <!-- 商品选择-->
    <el-main class="choose">
      <div style="width: 1000px; height: 50px; background-color: #afa8a8">
        <a class="sort">默认排序：</a>
        <select v-model="publishtime">
          <option hidden="true">发布时间</option>
          <option>最新发布</option>
          <option>发布一个月内</option>
        </select>
        <select v-model="publishplace">
          <option hidden="true">发货地</option>
          <option>省内</option>
          <option>省外</option>
        </select>
        <select v-model="publishsell">
          <option hidden="true">销量</option>
          <option>销量从低到高</option>
          <option>销量从高到低</option>
        </select>
      </div>
      <!-- 主要内容区 -->
      <div class="main">
        <div style="min-width: 1000px; height: 200px">
          <div class="Pregood" v-for="item in goodsList" :key="item.id">
            <a @click="toProductPage(item.id, item.supplier_id)">
              <div class="good">
                <img :src="src" height="150px" style="margin-left: 10px" />
                <div style="margin-left: 20px">价格：{{ item.product_name }}</div>
                <div style="margin-left: 20px">供应量：{{ item.supply }}</div>
              </div>
            </a>
          </div>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="500"
            style="margin-left: 200px; margin-top: 50px"
          >
          </el-pagination>
        </div>
        <!-- 分页END -->
      </div>
      <!-- 主要内容区END -->
    </el-main>
    <!-- 商品选择 END-->
  </el-container>
</template>

<script>
export default {
  name: "goods",
  methods: {
    toProductPage(pid,sid) {
      // console.log(sid)
      this.$router.push({
        path: "/supplier",
        query: {
          sid: sid,
          pid,
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick1() {},
    handleClick2() {},
    async load() {
      await this.$API.getSupply().then(response => {
        if (response.status == 200) {
          let text = this.$route.query.text
          this.goodsList = []
          for (let obj of response.data) {
            if (obj.product_name.indexOf(text) != -1)
              this.goodsList.push(obj);
          }
        }
      })
      
    }
  },
  computed: {
    searchText() {
      return this.$route.query.text
    }
  },
  watch: {
    searchText(newVal, oldVal) {
      this.load()
    },
  },
  data() {
    return {
      publishtime: "发布时间",
      publishplace: "发货地",
      publishsell: "销量",
      currentPage: 1,
      activeName1: "",
      activeName2: "",
      src: require("@/assets/apple.jpeg"),
      goodsList: [
        {
          id: 1,
          src: require("@/assets/apple.jpeg"),
          price: "0.35元/斤",
          name: "苹果",
        },
        {
          id: 2,
          src: require("@/assets/banana.jpeg"),
          price: "2.3元/斤",
          name: "香蕉",
        },
      ],
    };
  },
  created() {
    this.load()
  },
};
</script>

<style scoped>
.choose {
  max-width: 1000px;
  height: 1000px;
  margin-left: 0px;
  background-color: #f0eeee;
  padding: 0px 0;
}
.elheader {
  min-height: 180px;
  padding: 0;
}
/* 分类标签CSS */
.classification {
  margin-top: 10px;
  background-color: #f0eeee;
}
.classification .product-nav {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.classification .product-nav .title {
  min-width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
.classification .product-find {
  width: 100px;
  height: 100px;
  line-height: 40px;
  margin-left: 10px;
}
.classification .product-find .title {
  min-width: 150px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}
/* 分类标签CSS END */

/* 商品选择 */
.choose .sort {
  width: 100px;
  height: 50px;
  background: #afa8a8;
  line-height: 50px;
  margin-left: 20px;
}
/* 商品选择 END*/
.main .Pregood .good {
  border: 1px #000000 solid;
  margin-left: 15px;
  margin-top: 10px;
  width: 170px;
  float: left;
}
</style>
